<template>
<!-- 编辑联系人 -->
  <div>
    <mini-head :title="$route.name" />
    <div class="wrap">
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="contact.linkMan"
            label="姓名"
            :rules="[
              {
                required: true,
                message: '请添加收货人姓名',
              },
            ]"
            placeholder="请输入联系人名称"
          />
          <van-field
            v-model="contact.mobile"
            label="电话"
            :rules="[
              {
                required: true,
                message: '请添加收货人手机',
              },
              {
                pattern: /^\d{11}$/,
                message: '请输入合理的手机号',
              },
            ]"
            placeholder="请输入手机号"
          />
          <van-field
            :value="areaStr"
            label="地区"
            readonly
            right-icon="arrow"
            @click="showAreaPop"
            placeholder="选择省 / 市 / 区"
          />
          <van-field
            v-model="contact.address"
            label="详细地址"
            :rules="[
              {
                required: true,
                message: '请添加详细地址',
              },
            ]"
            placeholder="请输入详细地址"
          />
          <van-field
            v-model="contact.code"
            label="邮政编码"
            :rules="[
              {
                pattern: /^\d{6}$/,
                message: '请输入六位邮政编码',
              },
            ]"
            placeholder="请输入邮政编码"
          />
          <van-cell center title="默认联系人">
            <template #right-icon>
              <van-switch v-model="contact.isDefault" size="24" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-button
          round
          style="margin-top: 0.625rem"
          block
          type="primary"
          native-type="submit"
          >提交</van-button
        >
      </van-form>
      <van-button @click="del" round style="margin-top: 0.625rem" block type="danger"
        >删除</van-button
      >
    </div>
    <!-- 省市区三级联动 -->
    <van-popup v-model="showArea" position="bottom" :style="{ height: '50%' }">
      <van-area title="省市区" @confirm="confirmArea" :area-list="areaList" />
    </van-popup>
    <!-- /省市区三级联动 -->
  </div>
</template>

<script>
import MiniHead from '../../components/MiniHead.vue'
import { areaList } from '@vant/area-data'
import { fetchContactInfo, updateContact, delContact } from '../../api/index'
import { getToken } from '../../utils/'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      areaList,
      areaStr: '',
      contact: {
        linkMan: '',
        mobile: '',
        address: '',
        provinceId: '',
        districtId: '',
        cityId: '',
        code: '',
        isDefault: false // 是否是默认联系人
      },
      showArea: false
    }
  },
  created () {
    this.fetchContact()
  },
  methods: {
    del () {
      Dialog.confirm({
        title: '删除联系人',
        message: '确认删除此联系人吗'
      }).then(() => {
        delContact({
          id: this.$route.query.id,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.$toast({
              message: '删除成功',
              duration: 1000,
              onClose: () => {
                this.$router.replace('/contactLists')
              }
            })
          }
        })
      })
    },
    fetchContact () {
      // 获取编辑收货地址详情
      fetchContactInfo({
        id: this.$route.query.id,
        token: getToken()
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.contact = res.data.data.info
          this.areaStr =
            this.contact.provinceStr +
            '/' +
            this.contact.cityStr +
            '/' +
            this.contact.areaStr
        }
      })
    },
    confirmArea (area) {
      console.log(area)
      // 点击省市区 确认
      this.contact.provinceId = area[0].code
      this.contact.cityId = area[1].code
      this.contact.districtId = area[2].code
      this.areaStr = area[0].name + '/' + area[1].name + '/' + area[2].name
      this.showArea = false
    },
    showAreaPop () {
      // 点击显示省市区弹窗
      this.showArea = true
    },
    onSubmit () {
      updateContact({
        ...this.contact,
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.$toast({
            message: '修改联系人成功',
            duration: 1000,
            onClose: () => {
              this.$router.go(-1)
              // this.$router.replace('/contactLists')
            }
          })
        }
      })
    }
  },
  components: { MiniHead }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 1.6rem;
}
</style>
